<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>

    <div id="a"></div>

    <script>

        // left / top / 

        // move(ele , prop)

        // 属性参数 --- 对象的形式


        let oDiv = document.querySelector('div');
        animate(oDiv, {
            left: 500,
            top: 400,
            width: 300,
            height: 600
        })


        // function animate(ele, obj) {
        //     let t = setInterval(function () {
        //         // 遍历属性
        //         for (let key in obj) {
        //             let cur = parseInt(getComputedStyle(ele)[key]);
        //             // end = obj[key]
        //             // let speed = (end - cur) / 10 ;
        //             let speed = (obj[key] - cur) / 10;
        //             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        //             cur += speed;
        //             ele.style[key] = cur + 'px';

        //             // bug : 只要有一个属性到达终点 --- 就停止了   
        //             if (cur === obj[key]) {
        //                 clearInterval(t);
        //             }
        //         }
        //     }, 20)
        // }


        function animate(ele, obj) {
            let t = setInterval(function () {
                // 遍历属性
                for (let key in obj) {
                    let cur = parseInt(getComputedStyle(ele)[key]);
                    // end = obj[key]
                    // let speed = (end - cur) / 10 ;
                    let speed = (obj[key] - cur) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    cur += speed;
                    ele.style[key] = cur + 'px';

                    // 判断到达终点就把属性给删除
                    if (cur === obj[key]) {
                        // 
                        delete obj[key];
                        // 判断对象为空的时候  {}
                        if (Object.keys(obj).length === 0) {
                            clearInterval(t);
                        }
                    }
                }
            }, 20)
        }


        // [] === []
        // 如何判断数组是空的  arr.length === 0
    </script>

</body>

</html>